<template>
	<view class="container">
		<u-navbar left-icon-size="20" @leftClick="onClickLeft" title="Search"></u-navbar>
		<view class="search" :style="{marginTop: marginSwiperHeight}">
			<u-search shape="round" placeholder="please enter" bgColor="#fff" color="#515C6F" height="90rpx"
				searchIconSize="30" actionText="Search"></u-search>
			<view class="sort">
				<text @click="clickOne()" :class="chooseIndex == 1 ? 'choose' : 'unchoose'">Men (34)</text>
				<text @click="clickTwo()" :class="chooseIndex == 2 ? 'choose' : 'unchoose'">Women (17)</text>
				<text @click="clickThree()" :class="chooseIndex == 3 ? 'choose' : 'unchoose'">Kids (8)</text>
			</view>
			<view class="recent-search">	
				<text class="title">Recent Search</text>
				<view class="search-list">
					<text class="search-item"  v-for="item in searchList" :key="item.id">{{ item.searchName }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				marginSwiperHeight: '',
				chooseIndex: 0,
				searchList: [
					{
						id: 1,
						searchName: 'Shoes',
					},
					{
						id: 2,
						searchName: 'Sport wears',
					},
					{
						id: 3,
						searchName: 'Caps',
					},
					{
						id: 4,
						searchName: 'Bang and Olufsen',
					},
					{
						id: 5,
						searchName: 'Jeans',
					},
					{
						id: 6,
						searchName: 'Apple',
					},
					{
						id: 7,
						searchName: 'Sport wears',
					},
					{
						id: 8,
						searchName: 'QUE LA',
					},
				]
			}
		},
		methods: {
			//导航栏的高度
			getBarHeight() {
				this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
				this.marginSwiperHeight = this.iStatusBarHeight + 44 + 'px';
				console.log(this.marginSwiperHeight);
			},
			// 返回
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				});
			},
			clickOne() {
				this.chooseIndex = 1;
			},
			clickTwo() {
				this.chooseIndex = 2;
			},
			clickThree() {
				this.chooseIndex = 3;
			}
		},
		created() {
			this.getBarHeight();
		}
	}
</script>

<style lang="scss">
	.search {
		.u-search {
			padding-top: 60rpx;
			width: 90%;
			padding-left: 40rpx;

			text {
				color: #fff;
				font-size: 28rpx;
			}

			input {
				font-size: 32rpx;
			}
		}

		.u-search__action {
			background-color: #65DACC;
			padding: 12rpx 40rpx 12rpx 30rpx;
			border-radius: 40rpx;
			width: 100rpx;
		}
		// 输入框 placeholder样式	
		.u-search__content__input--placeholder {
			color: #BEBEBE;
		}
	}

	.sort {
		display: flex;
		justify-content: space-around;
		margin: 52rpx 20rpx;

		text {
			font-size: 28rpx;
			color: #BEBEBE;
			border-radius: 100rpx;
		}

		.choose {
			border: none;
			color: #fff;
			background-color: #65DACC;
			padding: 20rpx 36rpx;
		}

		.unchoose {
			padding: 18rpx 34rpx;
			border: 2rpx solid #727C8E;
		}
	}

	.recent-search {
		padding-top: 20rpx;

		.title {
			color: #BEBEBE;
			font-size: 32rpx;
			margin: 0 48rpx;
		}
		
		.search-list {
			display: flex;
			flex-wrap: wrap;
			margin: 20rpx 28rpx 0 28rpx;
			.search-item {
				border: none;
				color: #515C6F;
				background-color: #F0F2F3;
				padding: 20rpx 52rpx;
				border-radius: 100px;
				font-size: 28rpx;
				margin: 20rpx 8rpx 20rpx 8rpx;
			}
			
		}
	}
</style>